<template>
  <div class="home">
    <!-- 页面头部 -->
    <header class="page-header">
      <el-row :gutter="20">
        <el-col :span="24">
          <h1 style="margin-bottom: 10px; color: #303133; font-size: 28px;">在线工具集</h1>
          <p style="color: #606266; font-size: 16px; margin-bottom: 30px;">
            免费在线工具集，提供加密解密、编码转换、代码格式化等实用工具，让您的工作更高效
          </p>
        </el-col>
      </el-row>
    </header>

    <!-- 工具分类 -->
    <section class="tool-categories">
      <el-row :gutter="20">
        <el-col :span="24">
          <h2 style="margin-bottom: 30px; color: #303133;">选择您需要的工具</h2>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="category in categories" :key="category.id">
          <article class="tool-card" @click="navigateTo(category.route)">
            <div style="text-align: center; padding: 20px;">
              <el-icon size="48" :color="category.color">
                <component :is="category.icon" />
              </el-icon>
              <h3 style="margin: 20px 0 10px 0; color: #303133;">{{ category.title }}</h3>
              <p style="color: #909399; font-size: 14px;">{{ category.description }}</p>
            </div>
          </article>
        </el-col>
      </el-row>
    </section>

    <!-- 快速工具 -->
    <section class="quick-tools">
      <el-row :gutter="20" style="margin-top: 40px;">
        <el-col :span="24">
          <h3 style="margin-bottom: 20px; color: #303133;">快速工具</h3>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="tool in quickTools" :key="tool.id">
          <article class="quick-tool-card" @click="navigateTo(tool.route)">
            <div style="text-align: center; padding: 15px;">
              <el-icon size="32" :color="tool.color">
                <component :is="tool.icon" />
              </el-icon>
              <h4 style="margin: 15px 0 5px 0; color: #303133;">{{ tool.title }}</h4>
              <p style="color: #909399; font-size: 12px;">{{ tool.description }}</p>
            </div>
          </article>
        </el-col>
      </el-row>
    </section>

    <!-- 网站介绍 -->
    <section class="site-intro" style="margin-top: 50px;">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card>
            <h3 style="margin-bottom: 20px; color: #303133;">关于在线工具集</h3>
            <div style="color: #606266; line-height: 1.6;">
              <p style="margin-bottom: 15px;">
                在线工具集是一个免费的在线工具网站，为开发者和普通用户提供各种实用的在线工具。
                我们的工具包括加密解密、编码转换、代码格式化等功能，所有工具都经过精心设计，
                界面简洁，操作简单，无需下载安装，即可在线使用。
              </p>
              <p style="margin-bottom: 15px;">
                主要功能包括：
              </p>
              <ul style="margin-left: 20px; margin-bottom: 15px;">
                <li><strong>加密解密工具</strong>：MD5加密、Base64编码解码、URL编码解码</li>
                <li><strong>编码转换工具</strong>：Unicode编码、时间戳转换、UTF-8编码、二维码生成</li>
                <li><strong>代码格式化工具</strong>：JSON格式化、XML格式化、HTML格式化</li>
                <li><strong>其他实用工具</strong>：正则表达式验证、颜色值转换</li>
              </ul>
              <p>
                所有工具都是免费的，无需注册，即开即用。我们致力于为用户提供最好的在线工具体验。
              </p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { 
  Lock, 
  Edit, 
  Document, 
  Setting,
  Link,
  Picture,
  Timer,
  Search,
  Brush,
  DocumentAdd,
  DocumentCopy
} from '@element-plus/icons-vue'

const router = useRouter()

const categories = [
  {
    id: 1,
    title: '加密解密',
    description: 'MD5加密、Base64编码解码、URL编码',
    icon: Lock,
    color: '#E6A23C',
    route: '/encrypt'
  },
  {
    id: 2,
    title: '编码转换',
    description: 'Unicode编码、时间戳、UTF-8编码、二维码',
    icon: Edit,
    color: '#409EFF',
    route: '/encode'
  },
  {
    id: 3,
    title: '代码格式化',
    description: 'JSON格式化、XML格式化、HTML格式化',
    icon: Document,
    color: '#67C23A',
    route: '/format'
  },
  {
    id: 4,
    title: '其他工具',
    description: '正则表达式验证、颜色值转换',
    icon: Setting,
    color: '#F56C6C',
    route: '/other'
  }
]

const quickTools = [
  {
    id: 1,
    title: 'MD5加密',
    description: '快速生成MD5哈希值',
    icon: Lock,
    color: '#E6A23C',
    route: '/encrypt?tab=md5'
  },
  {
    id: 2,
    title: 'Base64编码',
    description: 'Base64编码解码工具',
    icon: Link,
    color: '#409EFF',
    route: '/encrypt?tab=base64'
  },
  {
    id: 3,
    title: '时间戳转换',
    description: 'Unix时间戳转换工具',
    icon: Timer,
    color: '#67C23A',
    route: '/encode?tab=timestamp'
  },
  {
    id: 4,
    title: '二维码生成',
    description: '生成和解析二维码',
    icon: Picture,
    color: '#909399',
    route: '/encode?tab=qrcode'
  },
  {
    id: 5,
    title: 'JSON格式化',
    description: 'JSON代码格式化工具',
    icon: DocumentAdd,
    color: '#67C23A',
    route: '/format?tab=json'
  },
  {
    id: 6,
    title: '正则验证',
    description: '正则表达式测试工具',
    icon: Search,
    color: '#F56C6C',
    route: '/other?tab=regex'
  },
  {
    id: 7,
    title: '颜色转换',
    description: '颜色值格式转换',
    icon: Brush,
    color: '#E6A23C',
    route: '/other?tab=color'
  },
  {
    id: 8,
    title: 'HTML格式化',
    description: 'HTML代码格式化',
    icon: DocumentCopy,
    color: '#409EFF',
    route: '/format?tab=html'
  }
]

const navigateTo = (route) => {
  router.push(route)
}
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  padding: 40px 0;
  background-color: #f5f7fa; /* A light background for the header */
  border-radius: 8px;
  margin-bottom: 30px;
}

.tool-categories, .quick-tools, .site-intro {
  margin-bottom: 30px;
}

.tool-card, .quick-tool-card {
  margin-bottom: 20px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tool-card:hover, .quick-tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
</style> 